<template>
  <BasicCard
    title="Accuracy_TD3_LSTM-3D"
    v-loading="isLoading"
    element-loading-text="正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.15)"
  >
    <BasicCharts :option="option" />
  </BasicCard>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, reactive } from "vue";
import { storeToRefs } from "pinia";
// store
import useDataScreen from "@/store/dataScreen";
import "echarts-gl";

const dataScreenStore = useDataScreen();
// 解构
const { sacMap: map } = storeToRefs(dataScreenStore);

// X - 轮次
const rounds = ref<string[]>([]);
// Y - 设备数量
const count = ["20", "40", "60", "80", "100"];
// 对应map映射
const mapKeys = [
  "td3_accuracy20_LSTM",
  "td3_accuracy40_LSTM",
  "td3_accuracy60_LSTM",
  "td3_accuracy80_LSTM",
  "td3_accuracy100_LSTM",
];
// Z - 二维数组
const dataTA = reactive([]);

let option = reactive({
  tooltip: {
    show: true,
  },
  visualMap: {
    max: 1,
    inRange: {
      color: [
        "#313695",
        "#4575b4",
        "#74add1",
        "#abd9e9",
        "#e0f3f8",
        "#ffffbf",
        "#fee090",
        "#fdae61",
        "#f46d43",
        "#d73027",
        "#a50026",
      ],
    },
  },
  xAxis3D: {
    type: "category",
    data: rounds.value,
    name: "X-轮次",
    nameTextStyle: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff", //坐标轴的颜色
      },
    },
  },
  yAxis3D: {
    type: "category",
    data: count,
    name: "Y-设备台数",
    width: 100,
    nameTextStyle: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff", //坐标轴的颜色
      },
    },
  },
  zAxis3D: {
    type: "value",
    nameTextStyle: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff", //坐标轴的颜色
      },
    },
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // projection: 'orthographic'
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true,
      },
      ambient: {
        intensity: 0.3,
      },
    },
  },
  series: [
    {
      type: "bar3D",
      data: dataTA.map(function (item) {
        return {
          value: [item[1], item[0], item[2]],
        };
      }),
      shading: "lambert",
      label: {
        fontSize: 16,
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
          color: "#900",
        },
        itemStyle: {
          color: "#900",
        },
      },
    },
  ],
});

const initData = () => {
  // console.log("map.value", map.value);
  // const len = map.value.get('td3_accuracy20_LSTM').length; // 1000
  const len = 200;

  for (let i = 1; i <= len; i++) {
    rounds.value.push(i.toString());
  }

  for (let i = 0; i < mapKeys.length; i++) {
    // 二位数组最外层
    const getKey = mapKeys[i];
    const targetArr = map.value.get(getKey);

    for (let j = 0; j < len; j++) {
      // (y, x, z)
      // temp.push([i, j, targetArr[j]]);
      // dataTA.push(temp);

      dataTA.push([i, j, targetArr[j]]);
    }
  }
  // console.log('dataTA', dataTA)
  option.series[0].data = dataTA.map((item) => {
    return {
      value: [item[1], item[0], item[2]],
    };
  });
  // console.log('option.series[0].data', option.series[0].data)
  // console.log('count', count)
  // console.log('rounds.value', rounds.value)
  // console.log('dataTA', dataTA)
};

let isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    initData();
    isLoading.value = false;
  }, 3000);
});
</script>

<style scoped lang="scss"></style>
